<template>
  <div class="home-container">
    <el-container class="home-container">
      <el-aside width="205px">
        <el-menu text-color="#afcbd9" class="sidebar-container" style="text-align: left">
          <el-submenu :index="item.name" v-for="item in menuList" :key="item.name">
            <template slot="title">
              <svg-icon slot="prefix" :icon-class="item.meta.icon"/>
              {{item.meta.title}}</template>
            <el-menu-item :index="subItem.name" v-for="subItem in item.children" :key="subItem.name" @click="selectMenu(item.path,subItem.path)">
              <template slot="title">
                <svg-icon slot="prefix" :icon-class="subItem.meta.icon"/>
                {{subItem.meta.title}}</template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header style="text-align: right">
          <el-dropdown >
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <span>hery</span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>个人信息</el-dropdown-item>
              <el-dropdown-item @click.native.prevent="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>

</template>

<script>
import Config from "@/settings";
import {removeToken} from "@/utils/auth";
import request from "@/utils/request";

export default {
  name: 'Dashboard',
  data() {
    return {
      menuList: []
    }
  },
  created() {
    this.getmenu()
    this.getUserInfo()
  },
  methods: {
    getmenu() {
      request.get('http://localhost:8000/api/menus/build').then(res => {
        this.menuList = res.data
        console.log(this.menuList)
      })
    },
    selectMenu(path1,path2) {
        this.$router.push({path: path1 + '/' + path2}).catch(err => {
          console.log(err)
        })
    },
    logout() {
      this.$confirm('确定注销吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$request.delete('http://localhost:8000/auth/logout').then(res => {
          removeToken(Config.TokenKey)
          this.$router.replace({path: '/login'})
        })
      })
    },
    getUserInfo(){
      request.get('http://localhost:8000/auth/info').then(res => {
        console.log(res)
      })
    }
  }

}

</script>
<style scoped>
.home-container {
  height: 100%;
}
</style>
